<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :rightCallback="rightCallback" slot="header" v-if="isShowHeader" ref="header">
      <p slot="content" style="margin-left: -12px">{{title}}</p>
      <p slot="rightContent" v-if="needRight">{{rightContent}}</p>
      <p slot="leftContent" v-if="needLeft">{{leftContent}}</p>
    </Yq-header>
    <div :style="boxStyle" style="width: 76%;margin: 0 auto;padding-top: 38px">
      <div class="piontContainer">
        <img src="../../../../../src/assets/images/user/icon_yue@2x.png"  height="55%" alt="">
        <p style="font-size: 30px;color: #636363;">¥{{userPiont}}</p>
        <p style="color: #a9a9a9;font-size: 15px;">我的余额</p>
      </div>
      <!--<x-button type="primary" @click.native="RemaniderCashFn" action-type="button" style="width: 80%;margin-top: 20px;background: #f95422;font-size: 15px;">提现</x-button>-->
      <!--<p class="cashRecord" @click="cashRecordFn" align="center" style="color: #3d82e5;margin-top: 15px;font-size: 13px;"><span>提现记录</span></p>-->
    </div>
    <div style="width: 100%">
      <p style="text-align: center;color: #3d82e5;margin-bottom: 10px;" align="center">
        <a :href="qqLink"><img src="../../../../assets/kefuButtion.png" width="90px"/></a>
      </p>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, XButton, Alert } from 'vux'
  import YqHeader from '../../../../components/YqHeader.vue'
  import * as urls from '../../../../api/urls'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      YqHeader,
      Alert
    },
    data () {
      return {
        show: false,
        qqLink: '',
        message: '',
        userPiont: 666,
        isShowHeader: true,
        title: '余额',
        rightContent: '余额明细',
        needBack: true,
        needRight: true,
        needLeft: false,
        leftContent: '',
        boxStyle: 'min-height: 200px;border: solid 1px bisque;'
      }
    },
    methods: {
      onHide () {
      },
      onShow () {
      },
      cashRecordFn () {
        this.$router.push({
          path: '/remainder/RemainderRecord'
        })
        this.$router.go(1)
      },
      RemaniderCashFn () {
        this.$router.push({
          path: '/remainder/RemainderCash'
        })
        this.$router.go(1)
      },
      rightCallback () {
        this.$router.push({
          path: '/remainder/Detail'
        })
        this.$router.go(1)
      },
      getWalletInfo () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.http(urls.userWallet, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.userPiont = res.data.balance
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      weixinfn10 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      let qq = window.sessionStorage.getItem('sysqq')
      this.qqLink = 'http://wpa.qq.com/msgrd?v=3&uin=' + qq + '&site=qq&menu=yes'
      this.getWalletInfo()
      this.boxStyle = 'padding-top: 38px;min-height:' + (document.body.clientHeight - 38 - 65) + 'px'
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      this.weixinfn10()
    }
  }
</script>

<style scoped="scoped">
  .piontContainer{
    /*width: 100%;*/
    /*margin-top: 76px;*/
    width: 100%;
    height: 160px;
    padding-top: 30%;
  }
  .piontContainer > img {
    display: block;
    margin: 0 auto;
    /*border-radius: 50%;*/
  }
  p{
    text-align: center;
  }
  .piontContainer > p{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .piontContainer > p:nth-child(3){
    font-size: 20px;
    margin-bottom: 20px;
  }
  .cashRecord > span{
    padding-bottom: 2px;
    border-bottom:1px solid #3d82e5
  }
</style>
